<template>
  <div class="container setting">
    <template v-if="type === 1">
      <div class="bg-color-white">
        <div class="flex v-align-c div-input pad-t-5 pad-b-5" @click="$pt.navigateTo({url:'/pages/personal/setting/avatar/main'})">
          <div class="mar-r-20">
          头像</div>
          <div class="flex-item">
            <div class="align-r head-shop">
              <img :src="memberInfo.avatar" class="width-50 height-50" alt="" >
            </div>
          </div>
          <icon class="iconfont icon-arrow-right font-14 mar-r-12 mar-l-4"></icon>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20">
          昵称</div>
          <div class="flex-item"><input v-model="memberInfo.nickname" placeholder="请输入昵称"/></div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20">
          性别</div>
          <div class="flex-item">
            <van-radio-group v-model="radio" @change="onChange">
              <van-radio name="1" checked-color="#ffe200" class="mar-r-10">男</van-radio>
              <van-radio name="2" checked-color="#ffe200">女</van-radio>
            </van-radio-group></div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20"><label class="font-red font-20"></label>公司</div>
          <div class="flex-item"><input v-model="memberInfo.memberDetails.companyName" placeholder="请输入公司"/></div>
        </div>
        <div class="flex v-align-c div-input-2" @click="chooseLocation">
          <div class="mar-r-20 pad-t-10">
          地址</div>
          <div class="flex-item pad-t-10 pad-b-10">
            <input v-model="memberInfo.address" style="width:100%;" disabled="true" placeholder="请输入地址"/>
          </div>
          <icon class="iconfont icon-arrow-right font-14 mar-r-12 mar-l-4"></icon>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20">
          签名</div>
          <div class="flex-item"><input v-model="memberInfo.memberDetails.personalityName" placeholder="请输入签名"/></div>
        </div>
      </div>
      <div class="bg-color-white mar-t-10">
        <div class="flex v-align-c div-input">
          <div class="mar-r-20">
          手机</div>
          <div class="flex-item"><input type="number" v-model="memberInfo.phone" placeholder="请输入手机"/></div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20"><label class="font-red font-20"></label>微信</div>
          <div class="flex-item"><input v-model="memberInfo.wechatNo" placeholder="请输入微信"/></div>
        </div>
        <div class="flex v-align-c div-input">
          <div class="mar-r-20"><label class="font-red font-20"></label>邮箱</div>
          <div class="flex-item"><input v-model="memberInfo.email" placeholder="请输入邮箱"/></div>
        </div>
      </div>
    </template>
    <template v-if="type === 2">
      <div>
        <div class="bg-color-white pad-12 align-c">
          <textarea class="profile-textarea" v-model="memberInfo.profile" cursor-spacing="150" maxlength="500" placeholder="请输入简介"/>
        </div>
      </div>      
    </template>
    <div class="mar-10">
      <button size="default" class="save-btn" @click="doUpdateMember">保存</button>
    </div>
    <div class="pad-10"></div>
  </div>
</template>

<script>
  import { getMemberInfo, updateMember } from '@/api/home'

  export default {
    data() {
      return {
        memberInfo: {
          memberDetails: {}
        },
        chooseAddress: '',
        type: 0,
        radio: '0',
        mainInfo: {
          cardBackgroundPic: '',
          cardTemp: 1,
          avatar: ''
        },
        urlFrom: '',
        update: false
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onUnload() {
      this.$pt.removeStorageSync('mainInfo')
    },
    onShow() {
      this.$pt.removeStorageSync('chooseLocation')
      this.urlFrom = this.getCurrentPage().query.urlFrom
      // this.type = Number(this.getCurrentPage().query.from)
      this.type = 1
      if (this.type === 1) {
        this.$pt.setNavigationBarTitle({
          title: '主页信息'
        })
      } else {
        this.$pt.setNavigationBarTitle({
          title: '简介'
        })
      }
      this.initEls()
      if (!this.getMethodInitData('pages/personal/setting/main', 'initMemberInfo')) {
        this.initMemberInfo()
      }
    },
    methods: {
      initEls() {
        let mainInfo = this.$pt.getStorageSync('mainInfo')
        if (mainInfo) {
          if (mainInfo.cardTemp) {
            this.mainInfo.cardTemp = mainInfo.cardTemp
            this.memberInfo.cardTemp = mainInfo.cardTemp
          }
          if (mainInfo.avatar) {
            this.mainInfo.avatar = mainInfo.avatar
            this.memberInfo.avatar = mainInfo.avatar
          }
          if (mainInfo.cardBackgroundPic) {
            this.mainInfo.cardBackgroundPic = mainInfo.cardBackgroundPic
            this.memberInfo.cardBackgroundPic = mainInfo.cardBackgroundPic
          }
        }
      },
      initMemberInfo() {
        getMemberInfo(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.memberInfo = response.data
          this.radio = this.memberInfo.gender.toString()
          if (this.memberInfo.nickname) {
            this.memberInfo.nickname = this.$utils.getStrByLens(this.memberInfo.nickname, 16)
          }
          if (this.memberInfo.memberDetails.personalityName) {
            this.memberInfo.memberDetails.personalityName = this.$utils.getStrByLens(this.memberInfo.memberDetails.personalityName, 30)
          }
          this.chooseAddress = this.memberInfo.address
          if (this.memberInfo.cardTemp) {
            this.mainInfo.cardTemp = this.memberInfo.cardTemp
          }
          this.mainInfo.avatar = this.memberInfo.avatar
          if (this.mainInfo.cardBackgroundPic) {
            this.mainInfo.cardBackgroundPic = this.memberInfo.cardBackgroundPic
          }
        }).catch(() => {
        })
      },
      onChange(event) {
        // 单选按钮变动事件
        this.radio = event.mp.detail
        this.memberInfo.gender = this.radio
      },
      doUpdateMember() {
        // 如果自己输入了地址，清空经纬度
        if (this.type === 1) {
          if (this.chooseAddress !== this.memberInfo.address) {
            this.memberInfo.latitude = ''
            this.memberInfo.longitude = ''
          }
          if (!this.memberInfo.nickname) {
            this.$utils.showToast({ title: '请填写昵称！' })
            return
          }
          if (this.memberInfo.nickname.length > 8) {
            this.$utils.showToast({ title: '昵称不能超过8个字！' })
            return
          }
          if (this.memberInfo.memberDetails.personalityName) {
            if (this.memberInfo.memberDetails.personalityName.length > 15) {
              this.$utils.showToast({ title: '签名不能超过15个字！' })
              return
            }
          }
          if (!this.memberInfo.phone) {
            this.$utils.showToast({ title: '请填写手机号！' })
            return
          }
          if (!this.memberInfo.phone) {
            this.$utils.showToast({ title: '请填写手机号！' })
            return
          }
          if (!(/^1\d{10}$/.test(this.memberInfo.phone))) {
            this.$utils.showToast({ title: '请填写正确的手机号！' })
            return
          }
          if (!this.memberInfo.address) {
            this.$utils.showToast({ title: '请填写地址！' })
            return
          }
        }
        updateMember(this.memberInfo).then((response) => {
          if (response.isError) return
          this.$pt.removeStorageSync('mainInfo')
          this.$utils.showToast({ title: '保存成功' })
          setTimeout(() => {
            this.$pt.navigateBack({ delta: -1 })
          }, 500)
        }).catch(() => {
        })
      },
      chooseLocation() {
        const that = this
        this.$pt.setStorageSync('chooseLocation', true)
        that.$pt.chooseLocation({
          success: (res) => {
            console.log(res)
            this.memberInfo.address = res.address
            this.chooseAddress = res.address
            this.memberInfo.latitude = res.latitude
            this.memberInfo.longitude = res.longitude
          },
          fail: function(err) {
            if (err.errMsg.indexOf('cancel') !== -1) return
            that.$pt.showModal({
              content: '需要访问你的位置',
              success(res) {
                if (res.confirm) {
                  that.$pt.openSetting()
                } else if (res.cancel) {
                  console.log(err)
                }
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .select-temp-1{
    width: 38px;
    height: 64px;
  }
  .select-temp-2{
    width: 38px;
    height: 64px;
  }
  .select-temp-3{
    width: 54px;
    height: 37px;
    margin-left: -8px;
    margin-right: 0px;
  }
  .select-temp-b{
    padding: 2px 9px 2px 19px;
    border: #f8c400 1px solid;
    border-radius: 10px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  }
  .avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
  }

  .setting input {
    width: 90%;
  }

  .address-textarea {
    width: 100%;
    line-height: 1.2;
    height: 40px;
  }

  .profile-textarea {
    width: 90%;
    height: 200px;
    padding: 12px;
    border: #ededed 1px solid;
    border-radius: 5px;
  }

  .div-input {
    border-bottom: 0.5px solid #ededed;
    margin-left: 20px;
    min-height: 45px;
  }
  .div-input-2 {
    border-bottom: 0.5px solid #ededed;
    margin-left: 20px;
  }

  .div-input:last-child {
    border-bottom: 0;
  }
  .flex-item{
    input{
      text-align: right;
      font-size: 14px;
      color: #a3a3a3;
      // &::placeholder{
      //   color: #a3a3a3;
      // }
    }
    textarea{
      text-align: right;
    }
  }
  .setting{
    /deep/ ._van-radio-group{
      display: flex;
      justify-content: flex-end;
      width: 90%;
    }
  }
  .head-shop{
    img{
      border-radius: 50%;
    }
  }
  .save-btn{
    background: #ffe200;
    border-radius: 25px;
    &::after{
      border: none;
    }
  }
  button[disabled]:not([type]){
    color: rgba(0, 0, 0, 0.4);
    background-color: #e1e1e1;
  }
</style>
